<template>
  <div>
    <el-row :gutter="24" style="margin:20px 0 0 5px">
      <el-col :span="6">
        <el-input
          v-model="roleName"
          placeholder="请输入"
          clearable
          size="mini"
          style="width:100%"
          @keyup.enter.native="handleFilter"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="roleId"
          placeholder="请输入"
          clearable
          size="mini"
          style="width:100%"
          @keyup.enter.native="handleFilter"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-button
          class="el-button-query-mini"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="searchDate"
        >查询</el-button>
      </el-col>
    </el-row>
    <el-table
      border
      v-loading="laoding"
      :data="tableDate"
      :size="'small'"
      row-key="nodeId"
      :height="tableHeight"
      :tree-props="{children:'childrens'}"
      style="width:98%;margin:20px 10px"
    >
      <el-table-column prop="nodeName" label="机构名称" :show-overflow-tooltip="show"></el-table-column>
      <el-table-column prop="nodeId" label="机构编码" :show-overflow-tooltip="show"></el-table-column>
      <!-- <el-table-column prop="status" label="状态" :show-overflow-tooltip="show">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">{{row.status}}</el-tag>
        </template>
      </el-table-column>-->
    </el-table>
  </div>
</template>
<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        running: "success",
        lock: "gray",
        stop: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      laoding: false,
      roleName: "",
      roleId: "",
      show: true,
      tableDate: [
        {
          nodeName: "管理中心",
          nodeId: "1",

          childrens: [
            {
              nodeName: "风险安全部",
              nodeId: "3633",

              childrens: [{ nodeName: "安全管理组", nodeId: "0015T" }],
            },
          ],
        },
        {
          nodeName: "研发中心",
          nodeId: "2",

          childrens: [
            {
              nodeName: "风险安全部",
              nodeId: "3633",

              childrens: [{ nodeName: "安全管理组", nodeId: "0015T" }],
            },
          ],
        },
      ],
      tableHeight:
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) -
        this.$store.state.settings.tagViewHeight -
        100,
    };
  },
};
</script>